
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">

    <!-- 新 Bootstrap5 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css">

    <!--  popper.min.js 用于弹窗、提示、下拉菜单 -->
    <script src="https://cdn.staticfile.net/popper.js/2.9.3/umd/popper.min.js"></script>

    <!-- 最新的 Bootstrap5 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.min.js"></script>

    <title>文章详情</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    ul{
        padding: 0;
    }
    li{
        list-style: none;
    }
    .wrapper{
        width: 1000px;
        margin: 0 auto;
    }
    .comment{
        background: bisque;
        margin-top:100px ;
    }
    .article{
        padding-top: 50px;
    }
    .comment p{
        font-size: 20px;
        color: coral;
    }
    .content p{
        font-size:15px;
        color: black;
    }
    .comment .comment-content{
        padding: 10px 0;
        width: 668px;
        height: 100px;
        border-bottom: 1px solid #ede;
    }
    .article h3{
        padding-bottom: 25px;
    }
</style>
<body>
<div th:replace="~{common :: navbar}"></div>
<div class="article wrapper">
    <h3 th:text="${article.title}"></h3>
    <p th:text="${article.content}"></p>
</div>
<div class="comment">
    <div class="wrapper">
        <div class="comment-content" th:each="comment:${commentList}">
            <p th:text="${comment.author}"></p>
            <span th:text="${comment.content}"></span>
        </div>
    </div>
</div>

<div class="container mt-3 wrapper">
    <form th:action="@{'/comment/add/'+${article.id}}" method="post">
        <div class="mb-3 mt-3">
            <label for="author" class="form-label">请输入昵称</label>
            <input type="text" class="form-control" id="author" placeholder="请输入昵称" name="author">
        </div>
        <div class="mb-3 mt-3">
            <label for="content">请输入评论:</label>
            <textarea class="form-control" rows="5" id="content" name="content"></textarea>
        </div>
        <button type="submit" class="btn btn-primary">提交</button>
    </form>
</div>
</body>
</html>